---
layout: default
---
<article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">

	<header class="post-header">
		<link rel="stylesheet" href="/css/font_size.css" />
		<link rel="stylesheet" href="/css/style.css" />
		<link rel="stylesheet" href="/css/topics.css" />
		
		{% if page.keywords %}
			<meta name="keywords" content="{{ page.keywords | join: ', ' | escape }}">
		{% endif %}
		<p class="post-meta">
		<time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
			{%- assign date_format = site.minima.date_format | default: "%A, %B %-d, %Y" -%}
			{{ page.date | date: date_format }}
		</time>
			{%- if page.author -%}
			by <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">{{ page.author }}</span></span>
	      {%- endif -%}</p>
	</header>
	
	<div itemprop="articleBody">
		<!-- <img src="/images/page_headers/by_topic_page_header_860x130.png"> masthead logo -->
		{{- content -}}
		
		<!-- find out if there are posts and, if so, sort them into a collection -->		
		{%- if site.posts.size > 0 -%}
			{%- assign posts_by_topic = site.posts | group_by: 'topic' | natural -%}
			
			<!-- build the topics menu -->
			<BR>
			<!-- BUILD TOPICS MENU -->
			<div class="topics-menu">
				{% for topic in posts_by_topic %}
					 <!-- grab the topic name from the current post -->
					{% capture topic_color %}
						topic-color_{{ topic.name }}
					{% endcapture %}
					<div>
						<a href="#{{ topic.name }}"> <!-- Build a link that will auto-scroll to the topic heading. -->
							 <img class="topic-icon" src="/images/topics/{{ topic.name }}.png" alt="{{ topic.name | capitalize }}">
						</a>
						<p align="center" class="{{topic_name}}_font-color">{{ tag[1].size }}</p>
					</div>
				{%- endfor -%}
			</div>
			<BR>
			<HR>
			<BR>
			<!-- TOPIC POSTS LISTED BY ALPHABETIC CATEGORY -->
			 <!-- step through the list of tags/topics again -->
			{%- for topic in posts_by_topic -%}
					<!-- Grab the topic name -->
					{% capture topic_color %}
						topic-color_{{ topic.name }}
					{% endcapture %}

					<!-- Build a header for the topic. -->
					<div class="topic-div">
						<a id="{{topic.name}}">
						<span class="post-date"> {{ post.date | date: date_format }} <!-- Grab the post's date. -->
							<div class="{{ topic-color }} post-list-item"></div>
						</span>
						<span class="topic-span-icon">
							<img class="topic-icon" src="/images/topics/{{topic.name}}.png">
						</span>
					</div>

					{% assign topic_posts = topic.items | reverse %}

					<!-- List the posts by current topic. -->
					{%- for post in topic_posts -%}
							{%- assign date_format = site.minima.date_format | default: "%A, %B %-d, %Y" -%}
							<div class="post-topic">
								<div class="post-info">
									<div class="post-topic-date">
										{{- post.date | date: "%A, %B %-d, %Y" -}} <!-- date of post -->
									</div>
									<div>
										<a class="post-link" href="{{ post.url | relative_url }}"> <!-- build page URL -->
										{{- post.title -}}</a> <!-- title text -->
									</div>
									<div class="post-blurb">
										{{- post.description -}}
									</div>
								</div>
							</div>
							<BR>
					{% endfor %}
			{%- endfor -%}
		{%- endif -%}
		{%- include post-footer.html -%}
	</div>

	<a class="u-url" href="{{ page.url | relative_url }}" hidden></a>
</article>
